<template>
  <div class="index">
    <el-container>
      <el-container>
        <el-header>
          <el-menu :default-active="activeIndex" text-color="#FFFFFF" class="el-menu-demo" mode="horizontal"
            active-text-color=#f08300 @select="handleSelect">
            <el-menu-item index="1">系统首页</el-menu-item>
            <!--            <el-menu-item index="2">商家简介</el-menu-item> -->
            <el-menu-item index="3">推荐菜品</el-menu-item>
            <el-menu-item index="4">我的订单</el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-shopping-cart-full" style="color: white; font-size: 23px;line-height: 50px;"></i>
              购物车
            </el-menu-item>
          </el-menu>

          <div id="icon_login">
        
              <el-col :span="2" :offset="8">
                <el-avatar style="margin-top: 5px;" :src="imageUrl"></el-avatar>
              </el-col>
              <el-col :span="2">
                <el-dropdown @command="handleCommand">

                  <span style="font-size: 16px; color: white;  cursor: pointer;">欢迎您，{{nickname}}</span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="changeUser">个人中心</el-dropdown-item>
                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
                  </el-dropdown-menu>

                </el-dropdown>
              </el-col>


          </div>
        </el-header>


        <el-main>

          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>

    <el-dialog title="个人信息修改" :visible.sync="dialogFormVisible" style="width: 100%;">
     <el-row>
       <el-col :span="5" >
         <el-upload
          class="avatar-uploader"
          action="http://localhost:8090/user/upPhoto"
          :headers="header"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
           <img v-if="imageUrl" :src="imageUrl" class="avatar">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </el-col>
       <el-col :span="19">
         <el-form :model="form">

           <el-form-item label="新昵称" :label-width="formLabelWidth">
             <el-input style="width: 80%;" v-model="form.userName" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="原密码" :label-width="formLabelWidth">
             <el-input style="width: 80%;" v-model="form.oldPassword"  type="password" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="新密码" :label-width="formLabelWidth">
             <el-input style="width: 80%;" v-model="form.userPassword" type="password" autocomplete="off"></el-input>
           </el-form-item>
         </el-form>
       </el-col>
     </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subModify">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Index',
    data() {
      return {
        nickname: "游客",
        loginUser: {},
        activeIndex: "1",
        dialogFormVisible: false,
        form: {},
        formLabelWidth: '120px',
        imageUrl: '',
        header:{},

      }
    },
    methods: {
      handleCommand(command) {
        if (command == 'loginout') {
          localStorage.removeItem('loginUser')
          this.$router.push('/login');
        }
        if (command == "changeUser") {
          this.dialogFormVisible = true;
        }
      },
      handleSelect(key, keyPath) {
        if (key == 1) {
          this.$router.push("/u_main")
        }
        if (key == 2) {
          this.$router.push("/u_store")
        }
        if (key == 3) {
          this.$router.push("/recommand_food")
        }
        if (key == 4) {
          if (localStorage.getItem('loginUser') == null) {
            this.$router.push('/login');
          } else {
            this.$router.push("/orderes");
          }

        }
        if (key == 5) {
          if (localStorage.getItem('loginUser') == null) {
            this.$router.push('/login');
          } else {
            this.$router.push("/cart")
          }
        }
      },

      handleAvatarSuccess(res, file) {
        // 通过file.raw来生成一个虚拟地址
              this.imageUrl = URL.createObjectURL(file.raw);
              // res代表的是图片上传成功后，后台返回给前端的响应
              console.log("res", res);
              //   res.file的结果:
              //   destination: "./public/temp";
              //   encoding: "7bit";
              //   fieldname: "file";
              //   filename: "1686387647810-4er2ku5tgy444ewqphsm7h956.jpg";
              //   mimetype: "image/jpeg";
              //   originalname: "4er2ku5tgy444ewqphsm7h956.jpg";
              //   path: "public\\temp\\1686387647810-4er2ku5tgy444ewqphsm7h956.jpg";
              //   size: 94249;
              console.log("file", file);
              //   file.response的结果就是res

      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },

      subModify(){
        if(this.form.userName==null&&this.form.oldPassword==null){
           this.dialogFormVisible = false;
        }
        else{
          this.$http.put("/user/modify",this.form).then(resp=>{
            if(resp.data.code==200){
               this.dialogFormVisible = false;
               this.form={};
               this.$message.success("修改成功!");
               localStorage.removeItem('loginUser')
               this.$router.push('/login');
            }else{
               this.$message.error(resp.data.message);
            }
          })
        }


      }

  },
  created() {
    this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
    if (this.loginUser != null) {
      this.nickname = this.loginUser.userName;
      this.imageUrl = this.loginUser.userImg;
    }
    this.header = {token: localStorage.getItem("token") };
    this.handleSelect(1);
  },
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .index {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
  }

  .el-header {
    background-color: #f08300;
    color: white;
    text-align: right;
    font-size: 17px;
    line-height: 35px;

  }


  .el-main {
    background-color: #fff;
    color: #333;
    margin: 0;
    padding: 0;
    width: 100%;

  }


  #icon_login {
    font-size: 23px;
    line-height: 50px;

  }

  .el-menu-demo {
    background-color: transparent;
    font-weight: bold;
    float: left;
    width: 600px;
  }


  .el-menu-item:hover {
    background: #ffc778 !important;
  }

  .el-menu-item.is-active {
    background: #ffc778 !important;
  }
</style>
